<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>任务管理</title>
	 <meta http-equiv="refresh" content="2000"> 
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/highlight.css" rel="stylesheet">
    <link href="css/bootstrap-switch.css" rel="stylesheet">
    <link href="css/docs.min.css" rel="stylesheet">
    <link href="css/font.css" rel="stylesheet">
    <link href="css/datetimepicker.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <style type="text/css">
     
.btn-list{
    position: absolute;
    right: 1%;
    top:10%;
}
.btn_add{
     
}
.label{
    margin:5px;
    
}
.label-title{
    margin-right: 20px;
}
    </style>
    	<script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/highlight.js"></script>
        <script src="js/bootstrap-switch.js"></script>
        <script src="js/bootstrap-datetimepicker.js"></script>
        <script src="js/main.js"></script>
     
</head>
<body>
    
<div class="container-fluid">
  <div class="row"> 
 
  <div class="col-md-3"> </div>
  <div class="col-md-6">
        <h1 class="text-center">任务管理</h1>
          <ul class="list-group">
          </ul>
        <hr/>
         <div>
             <form class="form-inline " style="width:100%">
              <div class="form-group">
                <input class="datetimepicker" id="deadline" size="16" type="text" value="" placeholder="选择计划完成时间" readonly/>
              </div>
              <div class="form-group" >
                   
                 <input type="text" class="form-control " id="txt_title"  placeholder="输入任务内容"/>
                         
              </div>
               <a class="btn btn-success btn-sm  btn_add"> 添加新任务 </a>
            </form>
          </div>
   </div>
  <div class="col-md-3"> </div>
  </div>
</div>
 

<script>
        $(document).ready(function(){
             
             $('.datetimepicker').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii',
                    autoclose:true,
                });
            //提交按钮
            $('.btn_add').on("click",function(){
                var title=$("#txt_title").val();    
                var date =$("#deadline").val();
                if(title=="")
                {
                    alert("内容不能为空！");
                }
                else
                {
                    $.post("data.php?t=add",{"title":title,"date":date},function(data){
                        if(data==1)
                        {
                            alert("添加成功！");
                            updatelist();
                        }else
                        {
                            alert("添加失败！");
                        }
                    })
                }
            });
            
            //设置完成按钮
            $(document).on('click', '.btn-setok',function(e){
                
                var id=$(this).parent().parent().attr("data");    
                 
                $.get("data.php?t=setok&id="+id,function(data){
                    if(data==1)
                    {
                        alert("设置成功！");
                        updatelist();
                    }else
                    {
                        alert("设置失败！");
                    }
                })
            });
            
            //删除按钮
            
            $(document).on('click', '.btn-del',function(e){
                
                var id=$(this).parent().parent().attr("data");    
                 
                $.get("data.php?t=del&id="+id,function(data){
                    if(data==1)
                    {
                        alert("删除成功！");
                        updatelist();
                    }else
                    {
                        alert("删除失败！");
                    }
                })
            });

        });



var lTemplate=" <li class='list-group-item' data='{id}'><span class='label-title'>{title}</span><span class='label label-info'>{deadline}</span><span class='label label-success'>{state}</span>";
    lTemplate+="      <div class='btn-list'>";
    lTemplate+="          <a class='btn btn-primary btn-sm btn-setok'>完成</a>";
    lTemplate+="          <a class='btn btn-danger btn-sm btn-del'>删除</a>";
    lTemplate+="          </div>";
    lTemplate+="</li>";


         updatelist();
function updatelist()
{
    $.get("data.php?t=list",function(data){
        data=eval("("+data+")");
        if(data)
        {
            $(".list-group").empty();
             $.each(data,function(index,d){
                     var tmp=lTemplate;
                     tmp=tmp.replace("{id}",d.id);
                     tmp=tmp.replace("{deadline}",d.deadline);
                     tmp=tmp.replace("{title}",d.title);
                     tmp=tmp.replace("{state}",d.isok==1?"已完成":"进行中");
                     $(".list-group").append(tmp);
                 
             });
            
        }
    });
}
function successCallback(data) {
    data=eval("("+data+")");
        $(".show_msg").html("");
      $.each(data["issues"],function(index,d){  
          var title=d.subject;
         
          $(".show_msg").append("<li>["+d.status.name+"]"+ title.substr(0,12)+"</li>");
                 
             });   
}

    </script> 
</body>
</html>

 